import { createApp } from 'vue'
import App from './App.vue'

import './style.scss'
import 'uno.css'
import '@unocss/reset/tailwind.css' 
import 'animate.css'
import '../src/utils/auto-update'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import router from '../src/router'
import { createPinia } from 'pinia'
import { useThemeStore } from '../src/stores/theme'
// import { useAppStore } from '@/stores/app'
import { vLoadingFinish } from '../src/directives/loading';
// 确保DOM已解析
// 确保DOM已解析
document.addEventListener('DOMContentLoaded', () => {
  const appContainer = document.getElementById('app')
  if (!appContainer) return

  // 立即显示已有loading结构（index.html中定义的）
  const loadingEl = document.getElementById('app-loading')
  
  // 异步加载资源
  Promise.all([
    import('../src/router'),
    import('element-plus'),
    import('../src/stores/theme')
  ]).then(([router, ElementPlus, { useThemeStore }]) => {
    const app = createApp(App)
    const pinia = createPinia()
    
    app.use(pinia)
    app.use(router.default)
    app.use(ElementPlus.default)
    
    // 初始化主题
    const themeStore = useThemeStore()
    themeStore.initTheme()
    
    // 挂载应用
    app.mount('#app')
    
    // 移除加载动画（添加淡出效果）
    if (loadingEl) {
      loadingEl.style.transition = 'opacity 0.3s'
      loadingEl.style.opacity = '0'
      setTimeout(() => loadingEl.remove(), 300)
    }
  }).catch(err => {
    console.error('应用初始化失败:', err)
    if (loadingEl) {
      loadingEl.innerHTML = '加载失败，请刷新页面'
    }
  })
})

// const app =createApp(App)
// app.use(createPinia())
// // const appStore = useAppStore();
// // 全局混入,方案二
// // app.mixin({
// //   mounted() {
// //     // 所有组件挂载后都会触发
// //     if (this.$route.matched.some((record:any) => record.path === this.$route.path)) {
// //        appStore.setLoading(false); // 当前路由对应的组件挂载完成
// //     }
// //   }
// // });

// // 初始化时立即设置主题
// const themeStore = useThemeStore()
// themeStore.initTheme() 
// // 方案三，自定义指令（简洁高效）
// app.directive('loading-finish', vLoadingFinish);
// // 注册Element Plus图标
// for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
//   app.component(key, component)
// }
// app.use(ElementPlus, {
//   locale: zhCn,
// })
// app.use(router)
// app.mount('#app')
